<template>
  <el-dialog v-model="drawer" title="产品列表" width="600px" :append-to-body="true" @close="close" custom-class="productList">
    <template #header="{ titleId, titleClass }">
        <el-row align="middle">
            <h4 :id="titleId" :class="titleClass" style="font-weight:normal">产品列表</h4>
            <el-tooltip
                effect="dark"
                content="刷新"
                placement="right"
            >
                <el-icon color="var(--el-text-color-secondary)" style="margin-left:5px;cursor:pointer;" size="16px" @click="reFresh"><ele-Refresh /></el-icon>
            </el-tooltip>
        </el-row>
    </template>
    <el-table :data="list" size="small" border ref="multipleTable">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="产品编号" prop="id"></el-table-column>
        <el-table-column label="产品名称" prop="spuName"></el-table-column>
        <el-table-column label="规格" prop="spec">
            <template #default="scope">
                <template v-if="scope.row.skuInfo || (!scope.row.skuInfo && !scope.row.skuInfos)">无规格</template>
                <template v-else-if="scope.row.skuInfos">
                    <el-cascader size="small" :props="selectData" v-model="scope.row.chooseSpec" :options="scope.row.skuInfos" >
                        <template #default="{ data }">
                            <span>{{ data.skuName }} - <span style="color: red;">￥{{data.price}}</span></span>
                        </template>
                    </el-cascader>                                        
                </template>
            </template>
        </el-table-column>
        <el-table-column label="单价" prop="price" width="50px" align="center"></el-table-column>
        <el-table-column label="库存" prop="stock" width="50px" align="center"></el-table-column>
        <template #empty>
            <el-empty description="暂无产品" :image-size="80">
                <el-button size="small" type="primary" @click="addGoods">去添加</el-button>
            </el-empty>
        </template>
    </el-table>
    <div class="page-block">
        <el-pagination
            v-model:currentPage="current"
            :small="true"
            :background="false"
            layout="total, prev, pager, next, jumper"
            :total="total"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
        />
    </div>
    <template #footer v-if="list.length > 0">
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm">提交</el-button>
            <el-button size="small" type="default" @click="cancelForm">取消</el-button>
        </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, watch, ref } from 'vue'
import { useRouter } from 'vue-router'
import { pageList, workList } from  '/@/api/pms/spu'
export default {
    name: 'ProductList',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultChoose: {
            type: Array,
            default(){
                return []
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context){
        const { dialogDrawer, defaultChoose } = toRefs(props)
        const router = useRouter()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        watch(() => dialogDrawer.value,
            (val) => {
                if(val){
                    getList()
                }
            }
        )
        const multipleTable = ref()
        const state = reactive({
            list: [],
            current: 1,
            total: 0,
            selectData: {
                value: "skuId",
                label: "skuName"
            }
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
            state.list = []
        }
        // 页码
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
        // 提交
        const submitForm = () => {
            let arr = []
            let list = multipleTable.value.getSelectionRows()
            list.forEach(e => {
                if(!filterData(e)){
                    arr.push(e)
                }
            })
            context.emit('onSubmit', arr)
            context.emit('update:dialogDrawer', false)
        }
        // 过滤已选数据
        const filterData = (e) => {
            const choosed = defaultChoose.value
            let flag = false
            for(let i = 0; i < choosed.length; i ++){
                if(choosed[i].id == e.id){
                    flag = true
                }
            }
            return flag
        }
        // 取消
        const cancelForm = () => {
            context.emit('update:dialogDrawer', false)
        }
        // 获取商品列表
        const getList = async () => {
            const res = await workList({
                spuName: '',
				current: state.current,
				size: 10
            })
            state.total = res.data.total
            const list = res.data.records 
            list.forEach(e => {
                e['skuQuantity'] = 0
                e['discount'] = 1
            })  
            state.list = list
        }
        // 添加产品
        const addGoods = () => {
            const { href } = router.resolve({
                name: 'GoodsAdd'
            })
            window.open(href, '_blank')
        }
        // 刷新列表
        const reFresh = () => {
            getList()
        }
        return { 
            ...toRefs(state),
            drawer,
            close,
            handleCurrentChange,
            submitForm,
            cancelForm,
            multipleTable,
            addGoods,
            reFresh
        }
    }
}
</script>

<style lang="scss">
.productList{
    .el-empty__description{
        margin-top: 5px;
        p{
            height: 20px;
            line-height: 20px;
        }
    }
    .el-empty__bottom{
        margin-top: 10px;
        height: 30px;   
        line-height: 30px;
    }
}
</style>